<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .wrap {
            width: 260px;
            height: 420px;
            background-color: #ccc;
        }

        .wrap .title {
            width: 260px;
            height: 360px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }

        .wrap .content {
            width: 260px;
            height: 60px;
            background-color: #f0f0f0;
            display: flex;
        }

        .wrap .content button {
            border: 1px solid #ccc;
            flex-grow: 1;
            cursor: pointer;
            height: 60px;
        }

        .wrap .content button.active {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">
            <span>0</span>
        </div>
        <div class="content">
            <button class="btn-start">开始</button>
            <button class="btn-pause">暂停</button>
            <button class="btn-reset">重置</button>
        </div>
    </div>
    <script>
        var spanEl = document.querySelector(".title span");
        var btnStart = document.querySelector(".btn-start");
        var btnPause = document.querySelector(".btn-pause");
        var spanReset = document.querySelector(".btn-reset");

        var count = 0 ;
        var timer = null ;
        btnStart.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function() {
                count +=1 ;
                spanEl.innerText = count;
            }, 10)
            this.className = "active";
            btnPause.className = "";
            spanReset.className = "";
        }

        btnPause.onclick = function () {
            clearInterval(timer);
            this.className = "active";
            btnStart.className = "";
        }

        spanReset.onclick = function () {
            clearInterval(timer);
            this.className = "active";
            btnStart.className = "";
            btnPause.className = "";
            count = 0 ;
            spanEl.innerText = 0 ;
        }
    </script>
</body>

</html>